import React,{useState,useRef,useEffect} from "react";
import { Table } from "antd";
import { ProTable } from "@ant-design/pro-components";
import { getBadRecordList,addBadRecord,deleteBadRecord,getBadRecordDetail,updateBadRecord } from "@/services/bad";
import { Button,message,Drawer,Popconfirm } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { render } from "react-dom";
import EditForm from "./components/EditForm";
import { Modal } from "antd";
import { Ellipse } from "fabric/*";


const BadRecord: React.FC = () => {
  const [isShow, setIsShow] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
   const [isEdit,setIsEdit] = useState(false)
  const badFormRef = useRef<any>(null);
  const [showDrawer, setShowDrawer] = useState(false);
  const [record, setRecord] = useState<any>({});
   const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,              // 默认每页条数
    showSizeChanger: true,     // 显示 “每页多少条” 选择器
    pageSizeOptions: [10, 20, 50, 100], // 允许用户选的条数

  });
const onAdd = () => {
  setIsEdit(false)
  setIsShow(true);
  // console.log('新增');
}
const onOk=(valid:any)=>{
console.log('valid :', valid);
  if(isEdit){
    updateBadRecord(valid).then((res)=>{
      console.log('res :', res);
      if(res.code === 500){
       return
      }else{
        messageApi.success('更新成功')
        setIsShow(false);
        badFormRef.current?.reload()
      }
    })
  }else{
    addBadRecord(valid).then((res)=>{
    console.log('res :', res);
      if(res.code === 500){
       return
      }else{
        messageApi.success('新增成功')
        setIsShow(false);
        badFormRef.current?.reload()
      }
    })
  }
}
const onDrawerClose=()=>{
  setShowDrawer(false);
}
const onCancel=()=>{
  setIsShow(false);
}
const editForm = (record: any) => {
  setIsEdit(true)
  setIsShow(true);
  // 将记录数据传递给EditForm组件
  setRecord(record);
}
const goDetail=(record:any)=>{
  //  setRecord(record);
   getBadRecordDetail({id: record.id}).then((res)=>{
    setRecord(res.data);
   })
  setShowDrawer(true);

  console.log('record :', record);
}
  const columns = [
    {
      title: "单位名称",
      dataIndex: "companyName",
      key: "companyName",
    },
    {
      title: "不良类型",
      dataIndex: "recordType",
      key: "recordType",
      hideInSearch: true
    },
    {
      title: "备注",
      dataIndex: "description",
      key: "description",
      hideInSearch: true,
      ellipsis: true,

    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      hideInSearch: true,

    },
     {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      hideInSearch: true,
      render: (_:any, record:any) => (
        <div>
          <Button type="link" size="small" onClick={() => goDetail(record)}>
            详情
          </Button>
          <Button type="link" size="small" onClick={() => editForm(record)}>
        编辑
      </Button>
           <Popconfirm
    title="确定删除吗？"
    onConfirm={()=>{
      deleteBadRecord(record.id).then((res)=>{
        if(res.code === 500){
          return
        }else{
          messageApi.success('删除成功')
          badFormRef.current?.reload()
        }
      })
    }}
    okText="Yes"
    cancelText="No"
  >
    <Button type="link" size="small" danger>
            删除
          </Button>
  </Popconfirm>

        </div>
      ),
    },
  ];
  return (
    <div>
      <h1>不良记录</h1>
      <ProTable
        pagination={{
          ...pagination,
          onChange: (page: number, pageSize: number) => {
            setPagination({
              ...pagination,
              current: page,
              pageSize,
            });
          }
        }}
        actionRef={badFormRef}
        toolBarRender={() => (
          <div>
            <Button icon={<PlusOutlined />} type="primary" size="small" onClick={onAdd }>
              新增
            </Button>
          </div>
        )}
        search={{
          labelWidth: 120,
        }}
        request={async (params: { pageSize: number; current: number }) => {
          const res = await getBadRecordList({
            pageSize: params.pageSize,
            pageNum: params.current,
            ...params
          });
          console.log('res :', res);
          return {
            data: res.rows,
            total: res.total,
          };
        }}
      columns={columns} />;
      <EditForm  open={isShow} onCancel={onCancel} onOk={onOk}  isEdit={isEdit} recordObj={record} />
      {/* 抽屉详情 */}
      <Drawer
        title="不良记录详情"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onDrawerClose}
        open={showDrawer}
        width={500}
      >
        <p>单位名称：{record?.companyName}</p>
        <p>不良类型：{record?.recordType}</p>
        <p>备注：{record?.description}</p>
        <p>状态：{record?.status}</p>

      </Drawer>
    </div>

  );
};

export default BadRecord;
